<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>充电桩定位</title>
 <#assign base=request.contextPath  />
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #container{
            min-width:600px;
            min-height:767px;
         }
    </style>
    <script type="text/javascript" src="${base}/js/jquery-1.8.3.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script>
var latlngsLinsen=[{}];
        //定位
        var geolocation = new qq.maps.Geolocation("${appid}", "myapp");
        var positionNum = 0;
        var options = {timeout: 8000};
        //定位成功后 加载地图 并默认地图初始位置为定位位置
        function showPosition(position) {
            init(position.lat,position.lng)
        }
        function showErr() {
            alert("定位失败");
        }
        geolocation.getLocation(showPosition, showErr, options);




        function init(lat,lng) {
               //地图初始化
            var center = new qq.maps.LatLng(lat,lng);
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: center,
                zoom: 13
            });
            var infoWin = new qq.maps.InfoWindow({
                map: map
            });

            var marker1 = new qq.maps.Marker({
                position: center,
                map: map
            });
            var anchor = new qq.maps.Point(0, 39),
                    size = new qq.maps.Size(42, 68),
                    origin = new qq.maps.Point(0, 0),
                    markerIcon = new qq.maps.MarkerImage(
                            "${base}/image/GpsLocation.png",
                            size,
                            origin,
                            anchor
                    );
            marker1.setIcon(markerIcon);



            //获取服务器查询出的 附近充电桩位置
            var nearbyJSON=nearby_Charge();
            //经纬度数组
            var latlngs = [];
            //充电桩其余信息
            var  nearbyContent=[];
            //循环添加附近充电桩的数组中
            for(var nearby=0;nearby<nearbyJSON.length;nearby++){
                latlngs.push(new qq.maps.LatLng(nearbyJSON[nearby].lat,nearbyJSON[nearby].lng));
                nearbyContent.push(nearbyJSON[nearby].content)
            }

            //循环给地图添加标注
            for(var i = 0;i < latlngs.length; i++) {
                (function(n){
                    var marker = new qq.maps.Marker({
                        position: latlngs[n],
                        map: map
                    });
                    //点击监听事件
                    qq.maps.event.addListener(marker, 'click', function() {

                        infoWin.open();
                        infoWin.setContent('<div style="text-align:center;white-space:nowrap;margin:10px;">'+nearbyContent[n]+'</div>' +
                                '<div> <button onclick="Gps('+latlngs[n].lat+','+latlngs[n].lng+','+lat+','+lng+')">点击导航</button></div>');
                        infoWin.setPosition(latlngs[n]);
                    });
                })(i);
            }
        }

//获取附近所有的充电桩
function nearby_Charge(){
    var nearbyLatLng="";
    $.ajax({
        type:"POST",
        url:"${base}/Map/chargeLatLng",
        dataType:"json",
       async:false,
        success : function(data){
            nearbyLatLng=JSON.parse(data);
        }
    });
    return nearbyLatLng;
}


        //导航
function Gps(charegeLat,charegeLng,locationLat,locationLng){
    window.location.href="${base}/Map/Navigation.html?charegeLat="+charegeLat+"&charegeLng="+charegeLng+"&locationLat="+locationLat+"&locationLng="+locationLng
}

    </script>
</head>
<body   >
<div id="container"></div>
<p>充电桩定位</p>
</body>
</html>

